<template>
  <div class="template-index-Lu">
        <commpVxeTable
            :key="reCommpVxeTable"
            :conditionBtnRow="true"
            :isCanWrap="true"
            :occupancyHeight="60"
            tablePadding="0 0 10px 0"
            :config="dataTableConfig"
            :columns="sqsxType == '末次会议'?columnsVxe:columnsVxe1"
            :formItem="[]"
            @checkboxChange="checkboxChange"
            ref="administrativeOffice"
            @searchEvent="searchEvent"
            @resetEvent="resetEvent"
            :adaptiveHeight="true"
            >
            <!-- <template v-slot:externalOperations="{data}"  >
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" @click.native="printMettingTable" icon="plus">打印会议签到表</a-button>
                    </template>
                </vxe-form-item>
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" @click.native="addClick" icon="plus">新增会议</a-button>
                    </template>
                </vxe-form-item>
            </template> -->
            <template v-slot:fqxqksm_name="{row}">
                <a-textarea 
                    v-if="row.fstate == '会议完成'"
                    v-model:value="row.fqxqksm"
                    placeholder="请输入缺席情况说明"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    @blur="fqxqksmBlur(row)"
                ></a-textarea>
                <div v-else v-html="row.fqxqksm"></div>
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <div v-if="row.fstate == '会议完成'" style="display: flex;flex-wrap: wrap;" :style="{justifyContent: sqsxType == '末次会议'?'center':'center'}">
                    <span style="font-size: 16px;font-weight: 600;color: #1ab394;line-height: 4;">会议已完成</span>
                    <div style="display: flex;justify-content: flex-start;align-items: center;" >
                        <a-button style="margin-left: 10px;" v-if="sqsxType == '末次会议'" class="blue-btn" @click="attendanceRecordClick(row)" icon="edit">签到记录</a-button>
                        <a-button style="margin-left: 10px;" v-if="sqsxType == '末次会议'" class="blue-btn" @click="feedbackDefectsClick(row)" icon="read">反馈缺陷项</a-button>
                    </div>
                </div>
                <a-form layout="inline" v-else>
                    <a-form-item v-if="row.fstate == '会议登记' && sqsxType == '末次会议'">
                        <a-button class="blue-btn" @click="reviseClick(row)" icon="edit">会议登记</a-button>
                    </a-form-item>
                    <!-- <a-form-item>
                        <a-button class="red-btn" @click="deleteClick(row)" icon="delete">删除</a-button>
                    </a-form-item> -->
                    <a-form-item v-if="row.fstate == '会议签到' && sqsxType == '末次会议'">
                    <a-button class="blue-btn" @click="shareQRCodeClick({fhyzt:row.fhyzt,id:row.id,frylx:'企业',fhylx:sqsxType,sqsxid:sqsxId})" icon="qrcode">参会人员签到码</a-button>
                    </a-form-item>
                    <a-form-item v-if="row.fstate == '会议签到' && sqsxType == '末次会议'">
                        <a-button class="green-l2-btn" @click="successSignIn(row)" icon="check-circle">完成签到</a-button>
                    </a-form-item>
                    <a-form-item v-if="row.fstate == '会议签到' && sqsxType == '末次会议'">
                        <a-button v-if="sqsxType == '末次会议'" class="blue-btn" @click="attendanceRecordClick(row)" icon="edit">签到记录</a-button>
                    </a-form-item>
                    <a-form-item v-if="sqsxType == '末次会议'">
                        <a-button class="blue-btn" @click="feedbackDefectsClick(row)" icon="read">反馈缺陷项</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <increase ref="increaseRef" @success="success" @completeRegistrationChange="completeRegistrationChange"></increase>
        <meetingAttendanceForm  ref="meetingAttendanceFormRef" />
        <QRQueryResults ref="QRQueryResultsRef" />
        <attendanceRecord ref="attendanceRecordRef" />
        <a-modal
            title="完成签到"
            :visible="wcqdVisible"
            @ok="wcqdhandleOk"
            @cancel="wcqdVisible = false"
        >
            <div>
                <span style="font-weight: 600;padding: 3px;background-color: #e6f7ff;display: inline-block;margin-bottom: 3px;" >关键人员缺席情况说明：</span>
                <a-textarea 
                    v-model:value="qxryText"
                    placeholder="请输入关键人员缺席情况说明"
                    :autosize="{ minRows: 3, maxRows: 10000 }"
                ></a-textarea>
            </div>
        </a-modal>
        <feedbackDefects ref="feedbackDefectsRef" />
  </div>
</template>
<script>
import  assessCheckApi  from './service/api.js'
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import  increase  from './increase.vue'
import  meetingAttendanceForm  from './meetingAttendanceForm.vue'
import  { deleteSqsxHy, sqsxYwxxsqsxhywc, updateSqsxHy, sqsxYwxxverifyGjry, }  from './service/index.js'
import QRQueryResults from './QRQueryResults'
import attendanceRecord from './attendanceRecord.vue'
import feedbackDefects from './feedbackDefects.vue'
export default {
  components: {
      commpVxeTable,
      increase,
      meetingAttendanceForm,
      QRQueryResults,
      attendanceRecord,
      feedbackDefects,
  },
  props:{
    data: {
      type:[Array,Object],
      default: () => {},
      required:false
    },
  },
  data() {
      return {
          sqsxId: '',
          sqsxType:'',
          reCommpVxeTable: '',
          dataTableConfig: {
            api: assessCheckApi.list,
            rowId: 'id',
            height:400,
            pageSize:10000,
            autoHidden:true,
            paramet: {
                sqsxid: '',
                fhylx:'',
            }
          },
          columnsVxe: [
              {
                  title: '会议主题',
                  field: 'fhyzt',
              },{
                  title: '会议地点',
                  field: 'fhydd',
              },{
                  title: '会议时间',
                  field: 'fhysj',
                  width: 143,
              },{
                  title: '缺席情况说明',
                  field: 'fqxqksm',
                  slots: {
                  // 使用插槽模板渲染
                      default: 'fqxqksm_name',
                  },
              },{
                  title: '操作',
                  field: 'jobid',
                  width: 524,
                  slots: {
                  // 使用插槽模板渲染
                      default: 'operation_btn',
                  },
              }
          ],
          columnsVxe1: [
              {
                  title: '会议主题',
                  field: 'fhyzt',
              },{
                  title: '会议地点',
                  field: 'fhydd',
              },{
                  title: '会议时间',
                  field: 'fhysj',
                  width: 143,
              },{
                  title: '缺席情况说明',
                  field: 'fqxqksm',
                  slots: {
                  // 使用插槽模板渲染
                      default: 'fqxqksm_name',
                  },
              },{
                  title: '操作',
                  field: 'jobid',
                  width: 102,
                  slots: {
                  // 使用插槽模板渲染
                      default: 'operation_btn',
                  },
              }
          ],
          formItem: [
              {
                  label: '关键字',
                  model: 'fgjz',
              }
          ],
          idList: [],
          wcqdVisible:false,
          qxryText:'',
          qxryData:{},
          isTable:false,
      }
  },
  mounted() {
    // this.getData('1658647915491233793')
  },
  watch: {
        // data(val) {
        //     //console.log('会议获取了什么？是否在发生变化',val)
        //     if(this.sqsxId !== val.sqsxid){
        //         this.sqsxId = val.sqsxid
        //         this.sqsxType = val.fhylx
        //         this.dataTableConfig.paramet.sqsxid = this.sqsxId
        //         this.dataTableConfig.paramet.fhylx = this.sqsxType
        //         this.reCommpVxeTable = Date.now()
        //     }
            
        // },
        data: {
            handler (val, oldVal) {
                if(this.sqsxType !== val.fhylx){
                    this.sqsxId = val.sqsxid
                    this.sqsxType = val.fhylx
                    this.dataTableConfig.paramet.sqsxid = this.sqsxId
                    this.dataTableConfig.paramet.fhylx = this.sqsxType
                    this.reCommpVxeTable = Date.now()
                }
                
            },
            immediate: true,
            deep: true
        },
    },
  methods: {
      getData(val){
        // this.sqsxId = '1674598702003929090'
        //console.log('会议获取了什么？',val)
        this.sqsxId = val.sqsxid
        this.sqsxType = val.fhylx
        this.dataTableConfig.paramet.sqsxid = this.sqsxId
        this.dataTableConfig.paramet.fhylx = this.sqsxType
        if(this.sqsxType !== val.fhylx){
            this.reCommpVxeTable = Date.now()
        }
        
        //console.log('会议获取了什么？',this.sqsxId)
      },
      fqxqksmBlur(row){
        updateSqsxHy({id:row.id,fqxqksm:row.fqxqksm}).then(res=>{
            if(res.code == 200){
                this.$message.success(res.message)
            }else{
                this.$message.warning(res.message)
            }
            this.$emit('fqxqksmChange')
        })
      },
      successSignIn(row){
        var that = this
        sqsxYwxxverifyGjry({id:row.id}).then(res=>{
            if(res.code == 200){
                if(res.result){
                    this.qxryText = res.result
                    this.qxryData = row
                    this.wcqdVisible = true
                }else{
                    this.$confirm({
                        title:'您确认要完成吗？',
                        // icon: createVNode(ExclamationCircleOutlined),
                        onOk() {
                            sqsxYwxxsqsxhywc({id:row.id}).then(res=>{
                                if(res.code == 200){
                                    that.$emit('completeRegistrationChange',row)
                                    that.reCommpVxeTable = Date.now()
                                    that.$message.success(res.message)
                                }else{
                                    that.$message.warning(res.message)
                                }
                            })
                            
                        },
            
                    });
                }
            }else{
                this.$message.warning(res.message)
            }
        })
        
      },
      wcqdhandleOk(){
        let that = this
        if(!this.qxryText){
            this.$message.warning('请输入关键人员缺席情况说明')
            return
        }
        updateSqsxHy({id:this.qxryData.id,fqxqksm:this.qxryText}).then(res1=>{
            if(res1.code == 200){
                sqsxYwxxsqsxhywc({id:this.qxryData.id}).then(res=>{
                    if(res.code == 200){
                        that.$emit('completeRegistrationChange',this.qxryData)
                        that.reCommpVxeTable = Date.now()
                        that.wcqdVisible = false
                        that.$message.success(res.message)
                    }else{
                        that.$message.warning(res.message)
                    }
                })
            }else{
                this.$message.warning(res1.message)
            }
        })
        
      },
      // 勾选
      checkboxChange(val){
          //console.log('已选择',val)
          this.idList = []
          if(val.length){
              val.forEach(item => {
                  this.idList.push(item.jobid)
              });
          }
      },
      // 搜索
      searchEvent(){
          this.dataTableConfig.paramet = {
              ...this.dataTableConfig.paramet,
          }
      },
      // 重置
      resetEvent(){
          this.dataTableConfig.paramet = {
              ...this.dataTableConfig.paramet,
          }
      },
      // 申请
      addClick(){
          this.$nextTick(_ => {
              this.$refs.increaseRef.visible = true
              this.$refs.increaseRef.getData({sqsxid:this.sqsxId,fhylx:this.sqsxType},false)
          })
      },
      // 编辑
      reviseClick(row){
          //console.log('办理',row)
          this.$nextTick(_ => {
              this.$refs.increaseRef.visible = true
              this.$refs.increaseRef.getData({...row,sqsxid:this.sqsxId,fhylx:this.sqsxType},false)
          })
      },
      attendanceRecordClick(row){
        this.$refs.attendanceRecordRef.getData(row)
        this.$refs.attendanceRecordRef.visible = true
      },
      //反馈缺陷项
      feedbackDefectsClick(){
        this.$refs.feedbackDefectsRef.getData({sqsxid:this.sqsxId})
        this.$refs.feedbackDefectsRef.visible = true
      },
      // 删除
      deleteClick(row){
        var that = this
        that.$confirm({
          title: '您确定要删除当条会议主题吗?',
          content: '',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            deleteSqsxHy({ids:row.id}).then(res => {
              if(res.code == 200){
                that.reCommpVxeTable = Date.now()
                that.$message.success(res.message)
              } else {
                that.$message.warning(res.message)
              }
            })
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      },
      shareQRCodeClick(row){
        this.$refs.QRQueryResultsRef.visibleQRQrCode = true
        this.$refs.QRQueryResultsRef.getData(row)
      },
      
      cancel(e) {
          //console.log(e);
      },
      // 弹窗提交成功
      success(){
          // 刷新表格 清空id数组
          this.$refs.administrativeOffice.resetEvent()
          this.idList = []
      },
      // 打印表格
      printMettingTable(){
        this.$nextTick(_ => {
            // this.$refs.meetingAttendanceFormRef.visible = true
            this.$refs.meetingAttendanceFormRef.getData({sqsxid:this.sqsxId,fhylx:this.sqsxType})
        })
      },
      //完成登记
      completeRegistrationChange(val){
        this.success()
        this.$emit('completeRegistrationChange',val)
      }
  },
}
</script>
